<template>
 <div>
  <!-- 直接绑定 -->
   <p :class="activeClass">123</p>
   <!-- 三元绑定 -->
   <p :class="isActive ? 'active':''">2</p>
   <!-- 对象绑定 -->
   <p :class="{active: isActive}">3</p>

   <!-- 静态类名和动态结合 -->
   <p class="item" :class="activeClass">4</p>
 </div>
</template>

<script>
export default {
data () {
 return {
  activeClass:'active',
  isActive:true
 }
}
}
</script>

<style>

</style>